<!-- 
	店铺首页
 
 -->

<template>
	<view class="shop-index-box">
		<view>
			<view class="bg-box">
				<view class="bg" :style="{'backgroundImage':`url(${bg})`}"></view>
				<!--  顶部的返回键与关注  -->
				<view class="bg-con" :style="[{height:CustomBar + 'px'}]">
					<view class="nav-title" :style="style">
						<view class="left-icon" @tap="navBack()">
							<text class="iconfont iconfanhui"></text>
						</view>
						<view class="right-coll">
							<view class="coll" v-if="coll == 1" @tap="getColl(0)">
								关注+
							</view>
							<view class="coll" v-if="coll == 0" @tap="getColl(1)">
								已关注
							</view>
						</view>
					</view>
				</view>
				<!--  顶部的返回键与关注end  -->
				<view class="shop-content" :style="{'top':CustomBar+'px'}">
					<view class="shop-head">
						<image class="head" :src="shopHead" v-if="shopHead.length >0 && shopHead !=null"></image>
						<view class="none-head" v-else></view>
					</view>
					<view class="shop-name u-line-1">
						魅族旗舰店
					</view>
					<view class="score-box">
						<u-rate active-icon="heart-fill" inactive-icon="heart" size="32" v-model="score" disabled inactive-color="#f1f1f1" active-color="#FA436A"></u-rate>
					</view>
					
					<view class="label-box">
						<view class="label-flex">
							<view class="label-item">
								<view class="label-num">
									110
								</view>
								<view class="label-name">
									关注
								</view>
							</view>
							
						</view>
						
						<view class="label-flex">
							<view class="label-item">
								<view class="label-num">
									56
								</view>
								<view class="label-name">
									商品
								</view>
							</view>
						</view>
						
						<view class="label-flex">
							<view class="label-item none-border">
								<view class="label-num">
									4.5
								</view>
								<view class="label-name">
									评分
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
			
			<!--  搜索的  -->
			<view class="search-box" @tap="navSearch">
				<text class="iconfont iconsousuo"></text>
				输入商品/关键词
			</view>
			<!-- 搜索end -->
			
			
			<view class="cate-list-box">
				<view class="cate-left">
					<scroll-view :scroll-x="true">
						<view class="cate-item" @tap="cateChange(item)" v-for="(item,index) in cateList" :key="index" :class="{'cate-action':item.id == cateId}">
							{{item.name}}
							<view class="cate-line"></view>
						</view>
					</scroll-view>
				</view>
				<view class="cate-right" @tap="switchListType">
					<text class="iconfont iconshuping heng" v-show="listType == 1"></text>
					<text class="iconfont iconhengping su" v-show="listType == 0"></text>
				</view>
			</view>
			
			
			<view class="goods-list-box" :class="{'goods-list-h':listType == 1}">
				<view class="line-20" v-show="listType == 1"></view>
				<view class="goods-item" v-for="item in 10" :key="item">
					<shop-goods-item :item="{a:0}" :type="listType"></shop-goods-item>
				</view>
			</view>
			
		</view>
		
		<l-loading v-if="isShow"></l-loading>
	</view>
</template>

<script>
	import lLoading from "@/components/loading.vue"
	import shopGoodsItem from "@/components/shop-goods-item.vue"
	export default {
		name:"shopIndex",
		data(){
			return{
				bg:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2144945483,4195021900&fm=26&gp=0.jpg",
				/*  顶部标题栏高度  */
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				isMore:false,
				pageNo:1,
				isShow:false,
				
				
				
				score:4.5,//顶部评分
				shopHead:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607578269633&di=1f0d057f837ac8190c473f5b84e8879b&imgtype=0&src=http%3A%2F%2Fimg02.fs.yiban.cn%2F44312192%2Favatar%2Fuser%2F200",
				coll:1,//是否关注  0 是 1否
				
				/*  分类列表  */
				cateList:[{id:0,name:"全部"},{id:1,name:"母婴用品"},
				{id:3,name:"玩具"},{id:4,name:"服装"},{id:5,name:"零食"}],
				//  分类id 
				cateId:0,
				listType:0,//列表显示 0 是竖的 1 是横的
				
			}
		},
		computed: {
			style() {
				let StatusBar= this.StatusBar;
				let CustomBar= this.CustomBar;
				let style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		components:{
			lLoading, shopGoodsItem
		},
		methods:{
			
			/*  去搜索页面  */
			navSearch(){
				uni.navigateTo({
					url:"/pages/shop/list"
				})
			},
			
			/*  切换分类的时候  */
			cateChange(item){
				if(item.id == this.cateId){
					return false
				}
				this.cateId = item.id
				this.pageNo = 1
				this.isShow = false
				this.getList(0)
			},
			
			/*  点击关注的时候  0 是关注  1是取消关注 */
			getColl(type){
				this.coll = type
			},
			
			/*  切换列表显示方式  */
			switchListType(){
				if(this.listType == 1){
					this.listType = 0
				}else{
					this.listType = 1
				}
			},
			
			/*  点击顶部的返回按钮  */
			navBack(){
				uni.navigateBack({
					delta:1
				})
			},
			
			/*  获取商品列表 0 代表清空list  1代表list.concat() */
			getList(type){
				uni.stopPullDownRefresh()
			}
		},
		
		onLoad() {
			
		},
		/*  下拉刷新  */
		onPullDownRefresh() {
			let t = setTimeout(() => {
				this.pageNo = 1
				this.isMore = true
				this.getList(0)
				clearTimeout(t)
			}, 1000)
		},
		
		/*  滚动到底部  */
		onReachBottom(){
			if(this.isMore){
				this.pageNo = this.pageNo + 1
				this.getList(1)
			}
		},
	}
</script>

<style scoped lang="scss">
	page{
		background: #FFFFFF;
	}
	.shop-index-box{
		width: 100%;
		margin: 0 auto;
		max-width: 2400rpx;
		/*  顶部的导航栏  */
		.bg-box{
			width: 100%;
			height: 56.2vw;
			max-height: 1348rpx;
			position: relative;
			.bg{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
				bottom: 0;
				background-color: rgba(0,0,0,0.3);
				background-repeat: no-repeat;
				background-size: cover;
				filter: blur(2px);
				z-index: 1;
				
			}
			.bg-con{
				position: absolute;
				z-index: 55;
				width: 100%;
				left: 0;
				right: 0;
				top: 0;
				height: 100rpx;
				z-index: 55;
				padding: 0 20rpx;
			}
			.nav-title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left-icon{
					.iconfont{
						color: #FFFFFF;
						font-size: 36rpx;
					}
				}
				.coll{
					color: #FFFFFF;
					font-size: 24rpx;
					line-height: 24rpx;
					display: inline-block;
					padding: 10rpx 20rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 10rpx 10rpx;
				}
			}
			.shop-content{
				position: absolute;
				z-index: 55;
				top: 100rpx;
				left: 0;
				right: 0;
				
				.shop-head{
					width: 100%;
					text-align: center;
					height: 110rpx;
				}
				.none-head{
					width: 110rpx;
					height: 110rpx;
					border-radius: 110rpx;
					border: 2rpx solid rgba(0,0,0,0.2);
					display: inline-block;
					background-color: rgba(204,204,204,0.5);
				}
				.head{
					width: 110rpx;
					height: 110rpx;
					border-radius: 110rpx;
				}
				.shop-name{
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					text-align: center;
					margin-top: 12rpx;
				}
				.score-box{
					text-align: center;
					width: 100%;
					height: 40rpx;
					padding-top: 6rpx;
				}
			}
			.label-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20rpx;
				.label-flex{
					flex-grow: 1;
					text-align: center;
				}
				.label-item{
					color: #FFFFFF;
					border-right: 4rpx solid #a8a3a2;
					line-height: 1.3;
					text-align: center;
				}
				.none-border{
					border: none;
				}
				.label-num{
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		/*  顶部的导航栏 end  */
		
		/*  搜索  */
		.search-box{
			width: calc(100% - 60rpx);
			margin: 14rpx auto 0 auto;
			position: relative;
			height: 66rpx;
			background: #FFFFFF;
			border-radius: 66rpx 66rpx;
			color: #b9b9b9;
			font-size: 28rpx;
			line-height: 66rpx;
			text-align: center;
			box-shadow: 0 0 20rpx rgba(0,0,0,0.2);
			.iconfont {
				position: absolute;
				font-size: 40rpx;
				color: #FA436A;
				left: 14rpx;
				font-weight: bold;
				top: 4rpx;
			}
		}
		/*  搜索end  */
		
		
		/*  分类标题  */
		.cate-list-box{
			width: calc(100% - 60rpx);
			margin: 30rpx auto 0 auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 52rpx;
			line-height: 52rpx;
			.cate-left{
				width: calc(100% - 60rpx);
				white-space:nowrap;
				height: 100%;
				.cate-item{
					display: inline-block;
					font-size: 28rpx;
					font-weight: bold;
					margin-right: 40rpx;
					position: relative;
					padding: 0 12rpx 20rpx 12rpx;
					line-height: 52rpx;
				}
				.cate-line{
					position: absolute;
					bottom: 12rpx;
					left: 0;
					width: 100%;
					height: 6rpx;
					background: #FA436A;
					border-radius: 6rpx 6rpx;
					display: none;
				}
				.cate-action{
					color: #FA436A;
					.cate-line{
						display: block;
					}
				}
			}
			.cate-left::-webkit-scrollbar {
			    display: none;
			}
			
			.cate-right{
				min-width: 60rpx;
				max-width: 60rpx;
				text-align: right;
				border-left: 4rpx solid #FA436A;
				margin-left: 20rpx;
				.iconfont{
					font-size: 40rpx;
					color: #FA436A;
					line-height: 52rpx;
				}
			}
		}
		
		
		/*  分类标题结束  */
		
		
		/*  商品列表  */
		.goods-list-box{
			width: 100%;
			padding: 0 20rpx 40rpx 20rpx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;
			background: #F1F1F1;
			margin-top: 40rpx;
			.goods-item{
				min-width: calc(50% - 10rpx);
				max-width: calc(50% - 10rpx);
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 0 0;
			}
			
		}
		.line-20{
			height: 4rpx;
		}
		.goods-list-h{
			display: block;
			.goods-item{
				min-width: 100%;
				max-width: 100%;
				border-radius: 0;
			}
		}
		/*  商品列表  */
	}
</style>
